if (!base.exams) base.exams = {};

base.exams.detail = {
	donutData : [$('.totalScore').find('.win').data('value'), $('.totalScore').find('.lost').data('value')],
	flag: true,
	init:function(){
		this.drawDonut();
	},
	drawDonut: function(){
		$('#drawDonut').html("");
		var colorArr = [ '#ac3539',"#82ccc8"],//sample color data
			startAngle = 0,
		    endAngle = 0,
		    sectorAngle = 0,
		    total = 0,        
		    radius = 0,
		    cx = 150,
		    cy = 150,
		    animSpeed = 1000,
		    paper = Raphael('drawDonut'),
		    path = null,
		    donutRadius = 0;

		    if(parseInt(this.donutData[0]) == 0 && parseInt(this.donutData[1]) == 0){
		    	colorArr = ['#ac3539','#ac3539'];
		    	this.donutData = [0.0001,100];
		    	this.flag = false;
		    }else if(parseInt(this.donutData[0]) > 0 && parseInt(this.donutData[1]) == 0 && this.flag == true){
		    	colorArr = ["#ac3539","#82ccc8"];
		    	this.donutData = [100,0.0001];
		    }else if(parseInt(this.donutData[0]) == 0 && parseInt(this.donutData[1]) > 0 && this.flag == true){
		    	colorArr = ['#82ccc8','#ac3539'];
		    	this.donutData = [0.0001,100];
		    }

		    //responsive values
		    var w = $('body').width(), deviceType = $('#device').val();
		    if(w>959){
		    	radius = 130;
		    	donutRadius = 82; 
		    }else if((w>767 && w<=959) && deviceType == 'tablet'){
		    	radius = 120;
		    	donutRadius = 70; 
		    }else if((w>480 && w<=767) && deviceType == 'tablet'){
				radius = 110;
				donutRadius = 70; 
			}else if(deviceType == 'mobile'){
				radius = 90;
				donutRadius = 55;
				cx = cx - 50;
				cy = cy - 50;
			}

		    paper.customAttributes.sector = function(cx, cy, r, startAngle, endAngle) {      
	            var rad = Math.PI / 180,
	            x1 = cx + r * -Math.cos(startAngle * rad),
	            x2 = cx + r * -Math.cos(endAngle * rad),
	            y1 = cy + r * -Math.sin(startAngle * rad),
	            y2 = cy + r * -Math.sin(endAngle * rad),
	            flag = (Math.abs(endAngle - startAngle) > 180);

	            return {
	                path:[["M", cx, cy,],["L", x1, y1,],["A", r, r, 0, +flag, 1, x2, y2,],["z"]]
	            }
	        }

		    //CALCULATE THE TOTAL
	        for(var k=0; k < this.donutData.length; k++){
	            total += this.donutData[k];
	        }

		    //CALCULATE THE ANGLES THAT EACH SECTOR SWIPES AND STORE IN AN ARRAY
		    var path1, path2;
	        for(k=0; k < this.donutData.length; k++){
	            sectorAngle = 360 * this.donutData[k]/total;   //calculate the sector angle for a pie slice

	            startAngle = endAngle;  //the start angle for each pie slice
	            endAngle = startAngle + sectorAngle;  //the end angle for each pie slice

	            //create a rapahel path with the custom pie 'sector' attribute that we defined above. Start angle initially is 0
	            path = paper.path().attr({sector:[cx, cy, radius, 180, 180], stroke:'#252525', "stroke-width":0, "stroke-linejoin" : "round","stroke-linecap" : "round", fill:colorArr[k]});
	            if(k==0) path1 = path; else path2 = path;
	            
	            if(this.flag){
	            	path.animate({sector:[cx, cy, radius, startAngle, endAngle]}, animSpeed); 
	            }else{
	        		path.attr({sector:[cx, cy, radius, startAngle, endAngle]});
	            }

	            //change the pie sector attribute over time - this is where the animation happens
	        	var increase = 0;
	        	if(parseInt(this.donutData[k]) && this.flag){
	        		increase = Math.round(100*(this.donutData[k]/total));
	        	}
	        	this.increasePercent(Math.floor(increase), k);       
	        }


	        //create the donut for the pie chart.
	       	paper.circle(cx, cy, donutRadius).attr({"fill":"#fff", "stroke": "#252525"});   
	       	//path2.animate({fill:'#ac3539'}, animSpeed);
	},
	increasePercent : function(value, index){
		var $totalScore = $('.totalScore span.win, .totalScore span.lost'), interval, i = 0;

			interval = setInterval(function(){
				if(i == value) clearInterval(interval);
				$($totalScore[index]).html(i+"%");
				i++;
			}, 1000/70);
		
	},
	onResize :function(){
		var msie = window.navigator.userAgent.indexOf("MSIE ");
		if(msie > 0){
			//pending..
		}else{
			$(window).resize($.proxy(function(){
				this.drawDonut();
			}, this));
		}
	}
};

